<!-- 申请开票 -->
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
      <el-form-item label="订单号" prop="shippingNoteNumber">
        <el-input
          v-model="queryParams.shippingNoteNumber"
          placeholder="请输入订单号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="司机手机号" prop="driverPhone">
        <el-input
          v-model="queryParams.driverPhone"
          placeholder="请输入司机手机号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="司机姓名" prop="driverName">
        <el-input
          v-model="queryParams.driverName"
          placeholder="请输入司机姓名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5" v-if="userType == $store.state.constants.userType_company"> -->
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-bank-card"
          size="small"
          :disabled="multiple"
          @click="getAddressList"
        >申请开票</el-button>
      </el-col>
      <el-col :span="8">
        <el-button type="info" size="small" plain disabled>
          已选 <label style="color: red;">{{ ids.length }}</label> 个订单，&nbsp;总金额：<label style="color: red;">￥{{ totalMoney }}</label>
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange" border size="mini" stripe fit border :header-cell-style="{'text-align':'center'}">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="订单号" align="center" prop="shippingNoteNumber" width="170">
        <span slot="header">
          订单号
          <el-tooltip effect="dark" placement="top" content="点击订单号可查看订单详情">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </span>
        <template slot-scope="scope">
          <span style="color: #1890ff; cursor: pointer;" @click="handleView(scope.row)">{{ scope.row.shippingNoteNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center" prop="status" :formatter="statusFormat" />
      <el-table-column label="运费金额(元)" align="center" prop="totalMonetaryAmount" />
      <el-table-column label="托运人" align="center" prop="consignor" />
      <el-table-column label="装货地址" align="center" prop="placeOfLoading" show-overflow-tooltip />
      <el-table-column label="收货方" align="center" prop="consignee" />
      <el-table-column label="收货地址" align="center" prop="goodsReceiptPlace" show-overflow-tooltip />
      <el-table-column label="司机" align="center" prop="driverName" width="80"/>
      <el-table-column label="司机电话" align="center" prop="driverPhone" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="getList"
    />

    <el-dialog title="选择收件地址" :visible.sync="openAddress" width="40%" center>
      <div>
        <el-table v-loading="addressLoading" :data="addressList"  border size="mini" stripe fit border :header-cell-style="{'text-align':'center'}">
          <el-table-column label="收件人" align="center" prop="addressee" show-overflow-tooltip />
          <el-table-column label="收件地址" align="center" prop="address" width="200" show-overflow-tooltip />
          <el-table-column label="联系电话" align="center" prop="phone" />
          <el-table-column width="50">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="chooseAddress(scope.row)"
                >选择</el-button>
              </template>
          </el-table-column>
        </el-table>
        <!--<el-radio-group v-model="payType" size="small">-->
          <!--<el-radio label="1" border>线下支付</el-radio>-->
          <!--<el-radio label="2" border>在线支付</el-radio>-->
        <!--</el-radio-group>-->

      </div>
    </el-dialog>

  </div>
</template>

<script>
import { billListOrder } from "@/api/tws/order";
import { listAddress} from "@/api/tws/address";

import { addBill } from "@/api/tws/bill";
import { accAdd } from "@/utils/func";

export default {
  name: "BillApply",
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      //弹窗遮罩层
      addressLoading:true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 弹窗
      openAddress: false,
      // 总条数
      total: 0,
      // 订单表格数据
      orderList: [],
      addressList: [],
      userType: '',
      totalMoney: 0.00,
      payType: '2',
      // 订单状态字典数据
      statusOptions: [],
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        originalDocumentNumber: null,
        shippingNoteNumber: null,
        serialNumber: null,
        vehicleAmount: null,
        transportTypeCode: null,
        businessTypeCode: null,
        totalMonetaryAmount: null,
        policyNumber: null,
        insuranceCompanyCode: null,
        leaveTime: null,
        carNeed: null,
        remark: null,
        consignor: null,
        consignorId: null,
        loadLinkTel: null,
        placeOfLoading: null,
        countrySubdivisionCode: null,
        startLongitude: null,
        startLatitude: null,
        consignee: null,
        consigneeId: null,
        receiptLinkTel: null,
        goodsReceiptPlace: null,
        countrySubdivisionCodeS: null,
        endLongitude: null,
        endLatitude: null,
        actualCarrierName: null,
        actualCarrierBusinessLicense: null,
        actualCarrierId: null,
        driverId: null,
        driverName: null,
        driverPhone: null,
        vehicleId: null,
        vehicleNumber: null,
        vehiclePlateColorCode: null,
        trailerVehicleId: null,
        trailerVehiclePlateNumber: null,
        trailerVehiclePlateColorCode: null,
        despatchActualDateTime: null,
        goodsReceiptDateTime: null,
        isReceipt: null,
        backImages: null,
        starCompany: null,
        starDriver: null,
        status: null,
        isPay: null,
        isBill: null,
        isSendToPro: null,
        sendToProDateTime: null,
        tenantId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
      },
      // 表单参数
      form: {},
      //
      billForm:{
        orderCount:0,
        totalMoney:0.00,
        status:null,
        receiptName:null,
        receiptPhone:null,
        receiptAddress:null,
        orderIds:[]
      }
    };
  },
  created() {
    this.userType = this.$store.state.user.type;
    this.getDict();
    this.getList();
  },
  methods: {
    getDict() {
      // 订单状态字典
      this.getDicts("order_status").then(response => {
        this.statusOptions = response.data;
      });
    },
    /** 查询待开票订单列表 */
    getList() {
      this.loading = true;
      billListOrder(this.queryParams).then(response => {
        this.orderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getAddressList(){
      this.openAddress = true;
      this.addressLoading = true;
      listAddress(this.queryParams).then(response => {
        this.addressList = response.rows;
        this.total = response.total;
        this.addressLoading = false;
      });
    },
    chooseAddress(row){
      const orderId = this.ids;
      let that = this;
      this.$confirm('收件地址为:'+row.address, "申请发票", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        that.openAddress = false;
        that.billForm.receiptName = row.addressee;
        that.billForm.receiptPhone = row.phone;
        that.billForm.receiptAddress = row.address
        that.billForm.orderCount = that.ids.length;
        that.billForm.totalMoney = that.totalMoney;
        that.billForm.status = 1;
        that.billForm.orderIds = orderId;
        addBill(that.billForm).then(res =>{
          that.$modal.msgSuccess("申请成功!");
          that.getList();
        })
      }).catch(e =>{
      })
    },
    // 订单状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.current = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
      this.func(selection);
    },
    // 计算总金额
    func(selection) {
      let t = 0.00;
      selection.forEach(o => {
        t = accAdd(t, o.totalMonetaryAmount);
      });
      this.totalMoney = t;
    },
    // 查看
    handleView(row) {
      this.$router.push({ path: '/order/orderDetail', query: { orderId: row.id }, replace: true });
    },
  }
};
</script>
